<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>订单中心</title>

    <link href="../assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="../assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="../css/personal.css" rel="stylesheet" type="text/css">
    <link href="../css/orstyle.css" rel="stylesheet" type="text/css">
    <link type="text/css" href="../js/sweetalert/sweetalert.css" rel="stylesheet"/>

    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/amazeui.js"></script>
    <script src="../assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="../assets/js/amazeui.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/sweetalert/sweetalert.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap3.js"></script>

</head>

<body>
<header th:replace="mall/header::header-user"></header>
<nav th:replace="mall/header::header-search"></nav>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-order">

                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单管理</strong> /
                        <small>Order</small></div>
                </div>
                <hr/>

                <div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>

                    <ul class="am-avg-sm-4 am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active"><a href="#tab1">所有订单</a></li>
<!--                        <li><a href="#tab2">待付款</a></li>-->
<!--                        <li><a href="#tab3">待发货</a></li>-->
<!--                        <li><a href="#tab4">待收货</a></li>-->
                    </ul>

                    <div class="am-tabs-bd">
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                            <div class="order-top">
                                <div class="th th-item">
                                    <td class="td-inner">商品</td>
                                </div>
                                <div class="th th-price">
                                    <td class="td-inner">单价</td>
                                </div>
                                <div class="th th-number">
                                    <td class="td-inner">数量</td>
                                </div>
								<div class="th th-status">
									<td class="td-inner">.</td>
								</div>
                                <div class="th th-amount">
                                    <td class="td-inner">合计</td>
                                </div>
                                <div class="th th-status">
                                    <td class="td-inner">交易状态</td>
                                </div>
                                <div class="th th-change">
                                    <td class="td-inner">交易操作</td>
                                </div>
                            </div>

                            <div class="order-main">
                                <div class="order-list">
									<th:block th:each="order : ${orderPageResult.list}">

                                    	<div class="order-status5">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;" th:text="${order.orderNo}">1601430</a></div>
                                            <span th:text="${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}">成交时间：2015-12-20</span>
                                        </div>
                                        <div class="order-content">
                                            <div class="order-left">
												<th:block th:each="item : ${order.mallOrderItemVOS}">
                                                <ul class="item-list">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a th:href="@{'/detail?goodsId='+${item.goodsId}}" href="#" class="J_MakePoint">
                                                                <img th:src="@{${item.goodsCoverImg}}" src="../images/kouhong.jpg_80x80.jpg"
                                                                     class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">
                                                                <a href="#">
                                                                    <p th:text="${item.goodsName}">美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price" th:text="${item.sellingPrice}">
                                                            333.00
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            <span>×</span><span th:text="${item.goodsCount}"></span>
                                                        </div>
                                                    </li>
                                                </ul>
												</th:block>
                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：<span th:text="${order.totalPrice}"></span>
                                                    </div>
                                                </li>
                                                <div class="move-right">
                                                    <li class="td td-status">
                                                        <div class="item-status">
                                                            <p class="Mystatus" th:text="${' '+order.orderStatusString}">交易成功</p>
                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
														<th:block th:if="${order.orderStatus>0 and order.orderStatus<3}">
															<div class="am-btn am-btn-danger anniu"
                                                                 th:onclick="cancelOrder([[${order.orderNo}]]);">
                                                                取消订单
															</div>
														</th:block>
														<th:block th:if="${order.orderStatus==0}">
															<div class="am-btn am-btn-danger anniu"
                                                                 th:onclick="payOrder([[${order.orderNo}]]);">
																去支付
															</div>
														</th:block>
														<th:block th:if="${order.orderStatus==3}">
															<div class="am-btn am-btn-danger anniu"
                                                                 th:onclick="finishOrder([[${order.orderNo}]]);">
																确认收货
															</div>
														</th:block>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
									</th:block>
                                </div>
                                <!--分页 -->

                                <th:block th:if="${null != orderPageResult and !#lists.isEmpty(orderPageResult.list)}">
                                    <ul class="am-pagination am-pagination-right">
                                        <li><a
                                                th:href="@{${orderPageResult.currPage==1}?'##':'/order/all?page=' + ${orderPageResult.currPage-1}}"
                                                href="#">
                                            &laquo; 上一页</a></li>
                                        <th:block th:if="${orderPageResult.currPage-2 >=1}">
                                            <li><a th:href="@{'/order/all?page=' + ${orderPageResult.currPage-2}}"
                                                   th:text="${orderPageResult.currPage -2}">5</a></li>
                                        </th:block>
                                        <th:block th:if="${orderPageResult.currPage-1 >=1}">
                                            <li><a th:href="@{'/order/all?page=' + ${orderPageResult.currPage-1}}"
                                                   th:text="${orderPageResult.currPage -1}">2</a></li>
                                        </th:block>

                                        <li class="am-active"><a href="#" th:text="${orderPageResult.currPage}">1</a></li>

                                        <th:block th:if="${orderPageResult.currPage+1<=orderPageResult.totalPage}">
                                            <li><a th:href="@{'/order/all?page=' + ${orderPageResult.currPage+1}}"
                                                   th:text="${orderPageResult.currPage +1}" >2</a></li>
                                        </th:block>
                                        <th:block th:if="${orderPageResult.currPage+2<=orderPageResult.totalPage}">
                                            <li><a th:href="@{'/order/all?page=' + ${orderPageResult.currPage+2}}"
                                                   th:text="${orderPageResult.currPage +2}">2</a></li>
                                        </th:block>

                                        <li><a href="#" th:href="@{${orderPageResult.currPage>=orderPageResult.totalPage}?'##':'/order/all?page=' + ${orderPageResult.currPage+1}}">下一页 &raquo;</a></li>
                                    </ul>
                                </th:block>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--底部-->
        <div th:replace="mall/footer::footer-fragment"></div>
    </div>
    <aside class="menu">
        <ul>
            <li class="person">
                <a href="#">个人中心</a>
            </li>
            <li class="person">
                <ul>
                    <li><a href="#">个人信息</a></li>
                    <li><a href="/personal/safe">安全设置</a></li>
                </ul>
            </li>
            <li class="person">
                <ul>
                    <li class="active"><a href="/order/all">订单管理</a></li>
                </ul>
            </li>

        </ul>

    </aside>
</div>

</body>
<script type="text/javascript">

    function cancelOrder(orderNo) {
        swal({
            title: "客官请注意",
            text: "确认要取消订单吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
                if (flag) {
                    $.ajax({
                        type: 'PUT',
                        url: '/orders/' + orderNo + '/cancel',
                        success: function (result) {
                            if (result.resultCode == 200) {
                                window.location.reload();
                            } else {
                                swal(result.message, {
                                    icon: "error",
                                });
                            }
                        },
                        error: function () {
                            swal("操作失败", {
                                icon: "error",
                            });
                        }
                    });
                }
            }
        )
        ;
    }

    function payOrder(orderNo) {
        // 跳转支付页面
        window.location.href="/pay?orderNo=" + orderNo;
    }

    function finishOrder(orderNo) {
        $.ajax({
            type: 'PUT',
            url: '/orders/' + orderNo + '/finish',
            success: function (result) {
                if (result.resultCode == 200) {
                    window.location.reload();
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }

</script>
</html>